import { Video, View, Text } from "@tarojs/components";
import { nextTick } from "@tarojs/taro";
import { useEffect, useImperativeHandle, useState } from "react";
import Player from "xgplayer";
import "xgplayer/dist/index.min.css";

export default ({ props }: any) => {
  const {
    id = "xgVideo",
    videoUrl = "",
    posterUrl = "",
    autoplay = false,
    isNextBtn = false,
    nextClick = "",
  } = props;
  // 西瓜视频实例
  const [xgPlayer, setXgPlayer] = useState(null);
  // 是否播放结束
  const [isEnded, setIsEnded] = useState(false);

  // 实例化播放器
  useEffect(() => {
    if (videoUrl) {
      nextTick(() => {
        let player = new Player({
          id: id, // 选择器 id
          url: videoUrl, // 视频源 url
          poster: posterUrl, // 封面图地址
          autoplay: autoplay, // 是否自动播放，不是所有场景配置了自动播放都可以成功自动起播的
          height: "100%",
          width: "100%",
          // rotate: {   //视频旋转按钮配置项
          //   innerRotate: true, //只旋转内部video
          //   clockwise: false // 旋转方向是否为顺时针
          // },
          rotateFullscreen: true, // 样式横屏全屏
          enableVideoDbltouch: true, // 使移动端支持双击暂停/播放
          videoInit: true, // 是否默认初始化video，当autoplay为true时，该配置为false无效
          playsinline: true, // 是否启用内联播放模式
          "x5-video-player-type": "h5", // 微信同层播放
          "x5-video-player-fullscreen": false, // 微信全屏播放
          "webkit-playsinline": true,
          "x5-playsinline": true,
          loop: false, // 是否循环播放
          fluid: true, // 是否启用流式布局，启用流式布局时根据width、height计算播放器宽高比，若width和height不是Number类型，默认使用16:9比例// 菜单控件
          ignores: ["volume", "fullscreen", "playbackrate", "pip", "replay"], // 禁用插件
          lang: "zh-cn",
        });

        setXgPlayer(player);

        // 监听是否播放结束
        player.on("ended", () => {
          setIsEnded(true);
        });

        // 监听是否播放
        player.on("play", () => {
          setIsEnded(false);
        });
      });
    }
  }, [videoUrl]);
  const coverBoxClick = (e) => {
    e.stopPropagation();
    if (xgPlayer && !isEnded) {
      if (xgPlayer.paused) {
        xgPlayer.play();
      } else {
        xgPlayer.pause();
      }
    }
  };
  // 销毁video实例
  const destroyVideo = () => {
    if (xgPlayer) {
      xgPlayer.destroy(); // 销毁播放器
      setXgPlayer(null); // 将实例引用置空
    }
  };
  // 重播按钮点击
  const replayBtn = (e) => {
    e.stopPropagation();
    if (xgPlayer) {
      xgPlayer.replay();
    }
  };
  // 暂停视频方法
  const pauseVideo = () => {
    if (xgPlayer && !isEnded && !xgPlayer.paused) {
      xgPlayer.pause();
    }
  };
  // 下一个点击
  const nextBtn = (e) => {
    e.stopPropagation();

    nextClick && nextClick();
  };

  // 导出方法
  useImperativeHandle(ref, () => ({
    destroyVideo, // 销毁video实例
    pauseVideo, // 暂停视频
  }));
  return (
    <View className="xgplayerBox">
      <View id={id}></View>

      {/*遮罩部分*/}
      <View onClick={(e) => coverBoxClick(e)} className="xgplayerBox-coverBox">
        {(isEnded && (
          <View onClick={(e) => replayBtn(e)} className="btnBox">
            <Image className="btnBox-icon" src={ReplayIcon} />
            <Text>重播</Text>
          </View>
        )) ||
          ""}

        {isEnded && isNextBtn && (
          <View onClick={(e) => nextBtn(e)} className="btnBox">
            <Image className="btnBox-icon" src={NextIcon} />
            <Text>下一个</Text>
          </View>
        )}
      </View>
    </View>
  );
};
